<template>
	<div class="cinecism">
		<div class="cinecismImg">
			<div class="imgBox2">
				<img src="../../../assets/images/gui.jpg" alt="" />
			</div>
			<div class="op">
				<div class="opOne">
					<img src="../../../assets/images/book.jpg" alt="" />
				</div>
				<div class="opTwo">
					<div class="opTwo1">小丑回魂2</div>
					<div class="opTwo2">抓住那只鬼，以为能抓住那个夏天</div>
				</div>
			</div>
		</div>
		<div class="cinecismContent">
			<span class="contTitle">抓住那只鬼，以为能抓住那个夏天</span>
			<div class="cinecismTitle">
				<div>
					<img src="../../../assets/images/usericon.jpg" alt="">
				</div>
				<span class="span1">Cydeny-评分</span>
				<span class="span2">《小丑回魂2》</span>
				<span class="span3">7.0</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "cinecism",
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';
	.cinecism{
		.cinecismImg{
			width: 100%;
			position: relative;
			.imgBox2{
				img{
					width: 100%;
					height: vw(220);
				}
			}
			.op{
				width: 100%;
				height: vw(80);
				position: absolute;
				bottom: 0;
				background: #000;
				color: #fff;
				background: rgba(0,0,0,.6);
				display: flex;
				.opOne{
					img{
						position: absolute;
						left: vw(20);
						bottom: vw(20);
						width: vw(80);
						height: vw(120);
					}
				}
				.opTwo{
					padding-left: vw(120);
					.opTwo1{
						font-size: vw(20);
						font-weight: bold;
						padding: vw(6) 0;
					}
					.opTwo2{
						font-size: vw(16);
						color: #ccc;
					}
				}
			}
		}
		.cinecismContent{
			width: 100%-vw(20);
			height: vw(80);
			margin: vw(20);
			border-bottom: 1px solid #ccc;
			.contTitle{
				font-size: vw(19);
			}
			.cinecismTitle{
				display: flex;
				align-items: center;
				height: vw(50);
				>div{
					img{
						width: vw(30);
						height: vw(30);
						border-radius: 50%;
					}
				}
				span{
					font-size: vw(16);
				}
				.span1{
					color: #999;
					padding-left: vw(10);
				}
				.span3{
					width: vw(25);
					height: vw(25);
					line-height: vw(25);
					color: #fff;
					background: #659d0e;
					text-align: center;
				}
			}
		}
	}
</style>
